<template>
  <!--    封装el-table组件-->
  <el-table v-loading="loading" :height="height" :header-cell-style="headerStyle"
            :max-height="maxHeight"
            @selection-change="handleSelectionChange"
            @select="rowSelectChange"
            @select-all="selectAllChange"
            :summary-method="summaryMethod"
            :span-method="spanMethod"
            :lazy="lazy"
            :expand-row-keys="expandRowsKeys"
            :load="treeLoad"
            :show-summary="isShowSummary"
            :data="tableData" :row-key="rowKey" :border="border" ref="table">
    <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
    <slot/>
    <template v-for="item  in tableColumn" :key="item.prop">
      <!--isHide 是否隐藏当前列 -->
      <el-table-column
          v-if="item.slot"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :width="item.width"
          :fixed="item.fixed"
          :type="item.type"
      >
        <template #default="scoped">
          <slot :name="item.slot" v-bind="scoped"/>
        </template>
      </el-table-column>
      <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :width="item.width"
          :fixed="item.fixed"
          :type="item.type"
          :show-overflow-tooltip="item.toolTip"
      ></el-table-column>
    </template>
  </el-table>
  <div v-if="page" style="text-align: center;margin-top: 10px">
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model="page.pageNum"
        :page-sizes="[10, 30, 50, 100,200]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
  </div>
</template>

<script>

import {defineComponent} from 'vue'

export default defineComponent({
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    rowKey: {
      type: String,
    },
    page: {
      default: function () {
        return {
          page: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    maxHeight: {},
    loading: {
      type: Boolean,
      default: false
    },
    height: {
      type: String
    },
    border: {
      type: Boolean,
      default: false
    },
    selection: {
      default: false
    },
    selectRows: {
      type: Array
    },
    headerStyle: {
      default: function () {
        return {
          backgroundColor: '#EFF6F9'
        }
      }
    },
    isShowSummary: Boolean,
    summaryMethod: {},
    spanMethod: {},
    lazy: {
      default: false,
      type: Boolean
    },
    treeLoad: {
      type: Function,
    },
    expandRowsKeys: {
      type: Array
    }
  },
  watch: {
    selectRows: {
      handler(val) {
        if (val.length === 0) {
          this.clearSelection()
        }
      }
    },
  },
  emits: {
    'handleSizeChange': null,
    'handleCurrentChange': null,
    'handleSelectionChange': null,
    'rowSelectChange': null,
    'selectAllChange': null,
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSelectionChange(value) {
      this.$emit('update:selectRows', value)
      this.$emit('handleSelectionChange', value)
    },
    clearSelection() {
      this.$refs.table.clearSelection()
    },
    rowSelectChange(selection, row) {
      this.$emit('rowSelectChange', selection, row)
    },
    selectAllChange(selection) {
      this.$emit('selectAllChange', selection)
    }
  },
})
</script>

<style lang="less">
.table {
  width: 100%;
}

.el-table thead {
  color: #5a5c61
}
</style>
